<template>
  <div class="compile">
   <div class="title">广告编辑</div>
   <div class="formBox">
     <div class="inputBox">
       <div class="key">广告标题 <span>*</span> </div>
       <div class="val"> <el-input v-model="compileData.ad_name" placeholder="请输入搜索关键字"></el-input> </div>
     </div>
     <div class="inputBox">
       <div class="key">pc端/移动端 <span>*</span> </div>
       <div class="val">
          <el-select v-model="compileData.ad_pm" placeholder="请选择" style="width:100%">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
       </div>
     </div>
     <div class="inputBox">
        <div class="key">分类 <span>*</span> </div>
        <div class="val">
          <el-select v-model="compileData.cs_name" placeholder="请选择" style="width:100%">
          <el-option
            v-for="item in classifyArr"
            :key="item.cs_id"
            :label="item.cs_name"
            :value="item.cs_id">
          </el-option>
          </el-select>
        </div>
     </div>
     <div class="inputBox inputBox_picture">
       <div class="key">图片素材 <span>*</span></div>
       <div class="val_picture">
         <img style="width:100%; height:100%" :src="'http://www.lertui.com/ad/upload/ad/'+compileData.ad_pic" alt="">
           <input type="file" @change="upimg" accept="image/*" />
       </div>
       <div class="val_txt">
        仅支持JPG、GIF、PNG、JPEG、BMP格式，文件小于4M
        <p>(建议尺寸：200*100px)</p>
       </div>
     </div>
     <div class="inputBox">
       <div class="key">链接 <span>*</span> </div>
       <div class="val"> <el-input v-model="compileData.ad_link" placeholder="请输入搜索关键字"></el-input> </div>
     </div>
     <div class="inputBox inputBox_remark">
       <div class="key">备注 <span>*</span> </div>
        <div class="val">
          <el-input type="textarea" :rows="4" placeholder="请输入备注" v-model="compileData.ad_remark"></el-input>
        </div>
     </div>
     <div class="inputBox">
       <div class="inputBoxBtn">
         <span class="bottom active" @click="submit">提 交</span>
         <span class="bottom" @click="cancel">取 消</span>
         </div>
     </div>
   </div>
  </div>
</template>
<script>
export default {
  props: ["compileData"],
  data() {
    return {
      title: "",
      input: "",
      value: "",
      value2: "",
      textarea: "",
      options: [
        {
          value: "pc",
          label: "pc端"
        },
        {
          value: "mobile",
          label: "移动端"
        }
      ],
      classifyArr: [],
      data: []
    };
  },
  mounted() {
    this.classify();
  },
  methods: {
    classify() {
      this.$http({
        method: "POST",
        url: "/ad/action/t_sys_classify_do.jsp",
        data: `action=query&a_id=11`
      }).then(res => {
        if (res.data) {
          this.classifyArr = res.data;
        }
      });
    },
    submit() {},
    cancel() {
      this.$store.state.isCompile = false;
    }
  },
  computed: {
    // compileData: () => {
    //   console.log(this.manageData);
    //   if (this.manageData == undefined) {
    //     return;
    //   }
    //   this.manageData.filter(o => {
    //     o.ad_id == this.$route.query.id;
    //   });
    // }
  },
  watch: {
    // manageData(val, oldVal) {
    //   console.log("data");
    //   console.log(val);
    //   let data = val.filter(o => {
    //     console.log(this.$route.query.id);
    //     o.ad_id == this.$route.query.id;
    //   });
    //   console.log(data);
    // }
  }
};
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl';

.compile {
  .title {
    line-height: 60px;
    padding-left: 30px;
    color: #333;
    font-size: 18px;
    border-bottom: 1px solid #f0f0f0;
  }

  .formBox {
    .inputBox {
      width: 570px;
      height: 35px;
      line-height: 35px;
      margin: 30px 0;

      .inputBoxBtn {
        margin-left: 140px;

        .bottom {
          padding: 10px 32px;
          border-radius: 40px;
          cursor: pointer;
          font-size: 14px;
          border: 1px solid #ccc;
          color: #666;
          box-sizing: border-box;
          margin-right: 50px;
        }

        .active {
          background: $bgColor;
          color: #fff;
          border: none;
        }
      }

      .key {
        width: 120px;
        text-align: right;
        padding-right: 18px;
        float: left;

        span {
          color: $bgColor;
        }
      }

      .val {
        width: 428px;
        float: right;

        .el-textarea {
          resize: none;
        }
      }
    }

    .inputBox_picture {
      height: 152px;

      .val_picture {
        width: 200px;
        height: 100px;
        background: url('../../assets/img/moren@2x.png');
        position: absolute;
        left: 140px;
        cursor: pointer;
      }

      .val_txt {
        width: 200px;
        height: 100px;
        position: absolute;
        left: 380px;
        font-size: 12px;
        color: #999;
      }
    }

    .inputBox_remark {
      height: 100px;
    }
  }
}
</style>

